<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权限表编辑</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link th:href="@{/css/common/bootstrap.min.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/font-awesome.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/animate.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/style.css}" th:rel="stylesheet">
    <link th:href="@{/css/plugins/treeSelect/treeSelectStyle.css}" th:rel="stylesheet">
    <link th:href="@{/css/plugins/treeSelect/metroStyle/metroStyle.css }" th:rel="stylesheet">
    <link th:href="@{/css/fileUpload/imageUpload.css}" th:rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>权限表编辑</h5>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="frm" method="post" >
                        <input type="hidden" id="id" name="id" value="">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">上级权限：</label>
                            <div class="col-sm-8">
                                	 <textarea id="parentId" style="width: 300px;overflow:hidden;cursor: pointer" checks="" type="text"
                                               readonly></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">权限名称：</label>
                            <div class="col-sm-8">
                                <input id="name" name="name" class="form-control" type="text" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">唯一标识：</label>
                            <div class="col-sm-8">
                                <input id="perCode" name="perCode" class="form-control" type="text" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">权限类型：</label>
                            <div class="col-sm-8">
                                <select id="menuType" name="menuType" class="form-control">
                                    <option value="" selected>请选择</option>
                                    <option value="0" >一级菜单</option>
                                    <option value="1" >二级菜单</option>
                                    <option value="2" >按钮</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">权限url：</label>
                            <div class="col-sm-8">
                                <input id="url" name="url" class="form-control" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">排序：</label>
                            <div class="col-sm-8">
                                <input id="grade" name="grade" class="form-control" type="text" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">是否叶子：</label>
                            <div class="col-sm-8">
                                <select id="isLeaf" name="isLeaf" class="form-control">
                                    <option value="" selected>请选择</option>
                                    <option value="0" >否</option>
                                    <option value="1" >是</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">状态：</label>
                            <div class="col-sm-8">
                                <select id="status" name="status" class="form-control">
                                    <option value="" selected>请选择</option>
                                    <option value="0" >关闭</option>
                                    <option value="1" >启用</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">描述：</label>
                            <div class="col-sm-8">
                                    <textarea id="description" name="description" class="form-control" value="">
                                    </textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button class="btn btn-primary" type="reset">重置</button>
                                <button class="btn btn-primary" type="submit">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>


<!-- 全局js -->
<script th:src="@{/js/common/jquery.min.js}"></script>
<script th:src="@{/js/common/bootstrap.min.js}"></script>

<!-- 自定义js -->
<script th:src="@{/js/common/content.js}"></script>


<!-- 树形下拉框    -->
<script th:src="@{/js/plugins/treeSelect/treeSelect.2.0.js}"></script>
<script th:src="@{/js/plugins/zTree/jquery.ztree.all.js}"></script>
<!-- jQuery Validation plugin javascript-->
<script th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
<script th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script th:src="@{/js/plugins/layer/laydate/laydate.js}"></script>

<script  th:inline="javascript">
    var permissions=[[${permissions}]];
    console.log(permissions)
    <!-- 树形下拉菜单    -->
    var zNodes = permissions;
    var defaults = {
        //单选模式(Radio mode)
        chkStyle: "radio",
        // 设置为单选
        radioType : "all",
        zNodes: zNodes,
        height: 233,
        filter: true,
        searchShowParent: true,
        chkboxType: {"Y": "ps", "N": "ps"},
    };
    //初始化树形下拉框
    $("#parentId").treeSelect(defaults);
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#frm").validate({
            // debug:true  如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。
            // ignore:".ignore"  对某些元素不进行验证
            //自定义规则,key:value的形式,key是要验证的元素,value可以是字符串或对象
            rules: {
                name: {
                    required: true,//必须输入的字段
                    minlength: 4,//最小长度为4个字符，汉字算一个字符
                    maxlength: 20//最大长度为20个字符
                },
                perCode: {
                    required: true,
                    minlength: 4,
                    maxlength: 40
                },
                menuType: {
                    required: true
                },
                url: {
                    required: true
                },
                grade: {
                    required: true,
                    number:true
                },
                isLeaf: {
                    required: true
                },
                status: {
                    required: true
                },
                description: {
                    required: true,
                    maxlength: 40
                }
            },
            //自定义的提示信息key:value的形式key是要验证的元素,值是字符串或函数
            //message当违反对应的规则时，所出现的提示信息
            messages: {
                name: {
                    required:"请输入权限名称",//输入为空出现的提示信息
                    minlength:"不能少于四个字符"//输入的字符少于4个出现的提示信息
                    // validator.resetForm();c重置表单Api
                }
            },
            //使用其它方式代替传统的表单提交方式
            submitHandler: function (form) {
                var object = new Object;
                object.id =  $("#id").val();
                object.parentId =  $("#parentId").treeSelect(defaults).val()[0];
                object.name =  $("#name").val();
                object.url =  $("#url").val();
                object.perCode =  $("#perCode").val();
                object.menuType =  $("#menuType").val();
                object.isLeaf =  $("#isLeaf").val();
                object.status =  $("#status").val();
                object.description =  $("#description").val();
                object.grade =  $("#grade").val();
                //使用ajax提交
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    contentType:'application/json;charset=utf-8',
                    //设置异步
                    async: false,
                    url: "/sysPermission/addOrEdit",
                    //$(form).serialize(),输出序列化表单值的结果,该Api可用于AJAX 请求的data
                    data:JSON.stringify(object),
                    success: function (res) {
                        if (res.message == "ok") {
                            layer.msg("编辑成功，2秒后返回...", {time: 2000}, function () {
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index);
                            });
                        }
                    }
                });
            }
        });
    });
</script>

<!--修改按钮值回显-->
<script th:inline="javascript">
    var sysPermission = [[${sysPermission}]];
    if(sysPermission.parentId !=null && sysPermission.parentId !="") {
        $("#parentId").treeSelect(defaults).val(parseInt(sysPermission.parentId));
    }
    $("#id").val(sysPermission.id);
    $("#name").val(sysPermission.name);
    $("#url").val(sysPermission.url);
    $("#perCode").val(sysPermission.perCode);
    $("#grade").val(sysPermission.grade);
    $("#menuType").val(sysPermission.menuType);
    $("#isLeaf").val(sysPermission.isLeaf);
    $("#status").val(sysPermission.status);
    $("#description").val(sysPermission.description);
</script>

</body>

</html>
